<template>
  <div style="width: 100%; height: 400px">
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { getPieChartData } from '@/api/chart'

export default {
  mixins: [resize],
  props: {
    chartMode: Object
  },
  data() {
    return {
      data: [
        { value: 1048, name: 'ANDROID' },
        { value: 735, name: 'LINUX' },
        { value: 580, name: 'OTHER' }
      ],
      props: {
        chartMode: Object
      },
      chart: null,
      emptyVisible: false
    }
  },
  mounted() {
    this.initData()
  },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return
  //   }
  //   this.chart.dispose()
  //   this.chart = null
  // },
  methods: {
    initData() {
      console.log('这里再请求数据', this.chartMode)
      getPieChartData(this.chartMode)
        .then((res) => {
          this.data = res
          if (this.data != null && this.data.length > 0) {
            this.initChart()
          } else {
            this.emptyVisible = true
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              normal: {
                formatter: '{b}:{c}: ({d}%)',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 15
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      }
      this.chart.setOption(option, true)
    }
  }
}
</script>

<style>
</style>
